/*
* @Author: 董洌淇
* @Date: 2020年12月4日14:09:59
* @Last Modified by: 董洌淇
* @Last Modified time: 2020年12月4日14:10:03
* @Description: 设备排名页面-标识，暂时无用
*/
<template>
	<view class="ranking-box">
		<cu-custom bgColor="bg-blue" :isBack="true"><block slot="backText"></block><block slot="content">设备排名</block></cu-custom>
		<view class="search-type">
			<view class="tags">
				<picker @change="orgChange" :value="orgIndex" :range="orgList" range-key="name">
					<view class="picker">
						{{orgList.length > 0 ? orgList[orgIndex].name : '所属组织'}}
						<text class="cuIcon-unfold margin-l-10upx"></text>
					</view>
				</picker>
			</view>
			<view class="tags">
				<picker @change="factorChange" :value="factorIndex" :range="factorList" range-key="name">
					<view class="picker">
						{{factorList.length > 0 ? factorList[factorIndex].name : '监测因子'}}
						<text class="cuIcon-unfold margin-l-10upx"></text>
					</view>
				</picker>
			</view>
		</view>
		<view class="time-data">
			<view  @click="onShowDatePicker('date')" class="btn-style">{{ date ? date: '选择日期时间' }}</view>
		</view>
		<view class="ranking-content">
			<view class="ranking-title margin-t-30upx" v-if="rankingData.length > 0" v-for="(item, index) in rankingData" :key="index">
				<view class="ranking-left">
					<text class="text-style">排名：{{index + 1}}</text>
				</view>
				<view class="ranking-right">
					<view class="ranking-child">
						<text>{{ factorHeader.deviceName }}:</text>
						<text>{{ rankingData.length > 0 ? item.deviceName : '' }}</text>
					</view>
					<view class="ranking-child">
						<text>{{ factorHeader.factorName }}:</text>
						<text>{{ rankingData.length > 0 ? item.factorName : '' }}</text>
					</view>
					<view class="ranking-child">
						<text>{{ factorHeader.factorValue }}:</text>
						<text>{{ rankingData.length > 0 ? item.factorValue : '' }}</text>
					</view>
					<!-- <view class="ranking-child">
						<text>{{ factorHeader.monitorTime }}:</text>
						<text>{{ rankingData.length > 0 ? item.timeDta : '' }}</text>
					</view> -->
				</view>
			</view>
		</view>
		<mx-date-picker :show="showPicker" :type="type" :value="value" :show-tips="true" :show-minutes="false" :show-seconds="false" @confirm="onSelected" @cancel="onSelected" />
		<view class="cu-load load-modal" v-if="loadModal">
			<image src="/static/appicon-72.png" mode="aspectFit"></image>
			<view class="gray-text">加载中...</view>
		</view>
	</view>
</template>

<script>
	import realTimeDataConfig from './config.js'
	import MxDatePicker from '@/components/mx-datepicker/mx-datepicker'
	import { getFactorApi } from '@/api/dataListApi'
	import { parseTimestamp } from '@/utils/methods'
	export default {
		name: 'ranking',
		components: { MxDatePicker },
		data() {
			return {
				loadModal: false, // 加载状态
				mapping: realTimeDataConfig[5], // 字段映射
				factorHeader: realTimeDataConfig[4], // 展示标题
				factorList: [], // 因子列表
				factorIndex: 0, // 因子默认选择
				orgList: realTimeDataConfig[1], // 所属组织列表
				orgIndex: 0, // 所属组织默认选择
				judge: null, // 判断条件
				filter: { // 请求参数
					deviceType: '0',
					startTime: '',
					endTime: '',
					intervalFlag: '1d',
					factor: ''
				},
				rankingData: [], // 排名結果
				showPicker: false, // 时间选择器状态控制
				date: parseTimestamp('yyyy-MM-dd', +new Date()), // 默认时间 格式：['2019/01/08 14:00','2019/01/16 13:59']
				type: 'date', // 时间选择器类型
				value: '' // 时间值的值
			}
		},
		mounted () {
			this.$nextTick(() => {
				let _temp = this.orgList[this.orgIndex].value
				if (_temp === '0' || _temp === '5') {
					this.factorList = realTimeDataConfig[3]
				} else {
					this.factorList = realTimeDataConfig[2]
				}
				let date = parseTimestamp('yyyy-MM-dd', +new Date())
				this.filter.startTime = Date.parse(date + ' ' + '00:00:00')
				this.filter.endTime = Date.parse(date + ' ' + '23:59:59')
				this.getrankingFun()
			})
		},
		methods: {
			// 时间组件显示
			 onShowDatePicker(type){
				this.type = type;
				this.showPicker = true;
				this.value = this[type];
			},
			// 选中时间
			onSelected(e) {
				this.showPicker = false;
				if(e) {
					this[this.type] = e.value; 
					//选择的值
					//原始的Date对象
					this.filter.startTime = Date.parse(e.value + ' ' + '00:00:00'),
					this.filter.endTime = Date.parse(e.value + ' ' + '23:59:59')
					this.getrankingFun()
				}
			},
			// 所属组织
			orgChange (e) {
				this.factorList = []
				this.orgIndex = e.detail.value
				let _temp = this.orgList[e.detail.value].value
				if (_temp === '2' || _temp === '5') {
					this.factorList = realTimeDataConfig[3]
				} else {
					this.factorList = realTimeDataConfig[2]
				}
				this.getrankingFun()
			},
			// 监测因子
			factorChange (e) {
				this.factorIndex = e.detail.value
				this.filter.factor = this.factorList[e.detail.value].value
				this.getrankingFun()
			},
			// 获取排名统计列表
			getrankingFun () {
				this.loadModal = true
				this.rankingData = []
				let deviceNumber = this.orgList[this.orgIndex].value
				this.filter.deviceType = deviceNumber
				this.filter.factor = this.factorList[this.factorIndex].value
				getFactorApi(this.filter).then(res => {
					res.data.data.map((v) => {
						v.factorName = this.mapping[v.factorName]
						v.factorValue = parseFloat(v.factorValue).toFixed(3)
						v.timeDta = parseTimestamp('yyyy-MM-dd hh:mm:ss', v.time)
					})
					this.rankingData = res.data.data
					this.loadModal = false
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ranking-box {
		.time-data {
			border-top: 1px solid $uni-border-color;
			.btn-style {
				display: block;
				text-align: center;
				background-color: $uni-bg-color;
				padding: 30upx;
			}
		}
		.search-type {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: $uni-bg-color;
			.tags {
				display: block;
				width: 50%;
				padding: 30upx 0 30upx;
				text-align: center;
			}
		}
		.ranking-content {
			.ranking-title {
				padding: 40upx;
				background: $uni-bg-color;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				.ranking-left {
					width: 30%;
				}
				.ranking-right {
					flex: 1;
					.ranking-child {
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: $uni-font-size-sm;
					}
				}
			}
		}
	}
</style>
